<template>
  <div class="upload_dialog">
    <el-row>
      <el-dialog
          top="15vh"
          :visible.sync="standardWage"
          width="50%"
          title="基本工资批量导入"
          center>
        <el-row style="text-align: center!important;margin-bottom: 2rem!important;">
          薪资年月：
          <el-date-picker
              v-model="date"
          type="month"
          placeholder="选择月">
          </el-date-picker>
        </el-row>

        <el-upload
            class="upload-demo"
            drag
            :http-request="uploadStandardWage"
            auto-upload
            accept=".xlsx,.xls"
            multiple action="#" style="text-align: center!important;">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传1个.xls/.xlsx文件</div>
        </el-upload>
      </el-dialog>
    </el-row>
    <el-row>
    <el-dialog
        top="15vh"
        :visible.sync="familyAllowance"
        width="50%"
        title="亲属补贴批量导入"
        center>
      <el-upload
          class="upload-demo"
          drag
          :http-request="uploadFamilyAllowance"
          auto-upload
          accept=".xlsx,.xls"
          multiple action="#" style="text-align: center!important;">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传1个.xls/.xlsx文件</div>
      </el-upload>
    </el-dialog>
    </el-row>
    <el-row v-if="personalAmount">
      <el-dialog
          top="15vh"
          :visible.sync="personalAmount"
          width="50%"
          title="个人社保批量导入"
          center>
        <el-upload
            class="upload-demo"
            drag
            :http-request="uploadFinPersonalAmountArchives"
            auto-upload
            accept=".xlsx,.xls"
            multiple action="#" style="text-align: center!important;">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传1个.xls/.xlsx文件</div>
        </el-upload>
      </el-dialog>
    </el-row>

    <el-dialog title="提示" :visible.sync="dialogVisible" append-to-body center>
      <div slot="title">
        <h3>提示</h3>
        <h5>上传文件中：
          <el-tag type="info" v-text="allNum"></el-tag>
          条数据，成功导入
          <el-tag type="success" v-text="successNum"></el-tag>
          条数据，失败导入：
          <el-tag type="danger" v-text="errorNum"></el-tag>
          条数据<span v-if="errorNum>0">，错误信息如下：</span></h5>
      </div>
      <el-row>
        <ol v-if="list.length>0" style="text-align: center;height:35vh;overflow-y: scroll;">
          <li v-for="(item,index) in list" style="text-align: left;">
            <span v-text="item" style="width: 350px;overflow: hidden;text-overflow: ellipsis"></span></li>
        </ol>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "UpLoadDialogComponent",
  props:{

    standardWage:{
      type:Boolean,
      default:false,
    },
    childAllowance:{
      type:Boolean,
      default:false,
    },
    familyAllowance:{
      type:Boolean,
      default:false,
    },
    personalAmount:{
      type:Boolean,
      default:false,
    },
  },
  data(){
    return{
      date:new Date(),
     form:{
       yearDate:null,
       montDate:null,
     },
      dialogVisible: false,
      list: [],
      allNum: 0,
      successNum: 0,
      errorNum: 0,
      methodName:null
    }
  },
  methods:{

    uploadFamilyAllowance(res){
      console.log(res)
      let formData = new FormData();
      formData.append("file", res.file)
      axios({
        method: "POST",
        url: "/fin_family_allowance/addBatch/"+this.$store.state.userInfo.id,
        headers: {
          'content-type': 'multipart/form-data',
        },
        data: formData
      }).then(res => {
        console.log(res)
        if (res.data.success) {
          let successNum = parseInt(res.data.data.successNum);
          let errorNum = parseInt(res.data.data.errorNum);
          let allNum = successNum + errorNum
          if (errorNum > 0) {
            let list = res.data.data.list
            this.successNum = successNum;
            this.errorNum = errorNum
            this.allNum = allNum;
            this.list = list
            this.dialogVisible = true
          } else {
            this.$parent.familyAllowance=false
            this.$message({
              dangerouslyUseHTMLString: true,
              message: "成功上传<b>" + allNum + "</b>条数据",
              type: "success"
            })
          }
        }
        else {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: res.data.message,
            type: "error"
          })
        }
      })
    },
    uploadFinPersonalAmountArchives(res){
      console.log(res)
      let formData = new FormData();
      formData.append("file", res.file)
      axios({
        method: "POST",
        url: "/fin_personal_amount_archives/addBatch/"+this.$store.state.userInfo.id,
        headers: {
          'content-type': 'multipart/form-data',
        },
        data: formData
      }).then(res => {
        console.log(res)
        if (res.data.success) {
          let successNum = parseInt(res.data.data.successNum);
          let errorNum = parseInt(res.data.data.errorNum);
          let allNum = successNum + errorNum
          if (errorNum > 0) {
            let list = res.data.data.list
            this.successNum = successNum;
            this.errorNum = errorNum
            this.allNum = allNum;
            this.list = list
            this.dialogVisible = true
          } else {
            this.$parent.familyAllowance=false
            this.$message({
              dangerouslyUseHTMLString: true,
              message: "成功上传<b>" + allNum + "</b>条数据",
              type: "success"
            })
          }
        }
        else {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: res.data.message,
            type: "error"
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>